<template>
  <div class="container-form">
    <div
      class="group-title"
      v-if="true"
    >
      <div
        @click="$store.commit('form/TOOGEL_NOW_ACTION', 'login')"
        :class="['item-title',{'active':nowAction==='login'}]"
      >
        <span>登录</span>
        <span
          :class="['item-switchaction',{'active':nowAction==='login'}]"
          @click="$store.commit('form/TOOGEL_IS_VERIFYCODE_LOGIN', !isVerifycodeLogin)"
        >{{isVerifycodeLogin?'密码':'验证码'}}登录</span>
      </div>
      <div
        @click="$store.commit('form/TOOGEL_NOW_ACTION', 'register')"
        :class="['item-title',{'active':nowAction==='register'}]"
      >注册</div>
    </div>
    <div class="login-box">
      <mivaInput
        :isShow="nowAction==='register'"
        v-bind="nickname"
        v-model="nickname.value"
        placeholder="请输入昵称"
        :maxlength="32"
        @blur="checkNickname"
      />
      <mivaInput
        v-bind="sign"
        v-model="sign.value"
        isShow="true"
        placeholder="请输入邮箱/手机号"
        @input="checkSign"
      />
      <mivaInput
        :isShow="passwordShow"
        v-bind="password"
        v-model="password.value"
        type="password"
        placeholder="请输入密码，密码格式为6-16个字符组成，区分大小写"
        :show-password="true"
        @input="checkPassword"
      />
      <inputVerifycode
        :isShow="verifycodeShow"
        :verifycode="verifycode"
        :sign="sign"
        placeholder="请输入验证码"
        @click="getVerifycode"
      />
    </div>
    <div
      class="group-button"
      v-if="true"
    >
      <itemButton
        :class="['item-button',{'active':nowAction==='login'}]"
        @click="toggleAction('login')"
        v-html="'登录'"
      />
      <itemButton
        :class="['item-button',{'active':nowAction==='register'}]"
        @click="toggleAction('register')"
        v-html="`注册`"
      />
    </div>
    <div class="group-other">
      <input
        v-model="isLicence"
        type="checkbox"
      >
      <span>用户协议</span>
      <span @click="$store.dispatch('page/toogelPage','resetPassword')">忘记密码</span>
    </div>
  </div>
</template>

<script>
// vuex
import { mapGetters } from 'vuex';
// utils
import { Message } from 'element-ui';
import {
  verifyCheckNickname,
  verifyCheckPassword,
  verifyCheckSign,
  getVerifycode,
} from './utils/verify';
// item
import inputVerifycode from './input-verifycode.vue';
import itemButton from './item-button.vue';
import mivaInput from './miva-input.vue';

export default {
  name: 'itemForm',
  components: {
    mivaInput,
    itemButton,
    inputVerifycode,
  },
  data() {
    return {
      isLicence: false,
    };
  },
  computed: {
    ...mapGetters([
      'nowAction',
      'isVerifycodeLogin',
      'sign',
      'nickname',
      'password',
      'verifycode',
    ]),
    passwordShow() {
      const { nowAction, isVerifycodeLogin } = this;
      // 在注册界面显示
      if (nowAction === 'register') {
        return true;
      }
      // 在不显示验证码框的时候显示
      return isVerifycodeLogin === false;
    },
    verifycodeShow() {
      const { nowAction, sign, isVerifycodeLogin } = this;
      // 在登录界面,并且选择了验证码登录,并且帐号格式正确
      if (nowAction === 'login' && isVerifycodeLogin && sign.state) {
        return true;
      }
      // 在注册界面,并且帐号格式正确
      if (nowAction === 'register' && sign.state) {
        return true;
      }
      // 以外所有状态全部隐藏
      return false;
    },
  },
  methods: {
    toggleAction(action) {
      const { nowAction, isLicence } = this;
      if (nowAction !== action) {
        this.$store.commit('form/TOOGEL_NOW_ACTION', action);
        return;
      }
      if (!isLicence) {
        Message.error('请先同意用户协议');
        return;
      }
      // 这里执行真实的注册登录操作
      if (nowAction === 'register') {
        this.$store.dispatch('form/registerHandler');
      } else {
        this.$store.dispatch('form/loginHandler');
      }
    },
    async checkNickname() {
      await verifyCheckNickname(this);
    },
    async checkSign() {
      await verifyCheckSign(this);
    },
    async getVerifycode() {
      await getVerifycode(this);
    },
    async checkPassword() {
      await verifyCheckPassword(this);
    },
  },
};
</script>

<style lang="less" src="./style/index.less"></style>
